<mat-toolbar>
  <span class="toolbar-title">资产趋势图</span>
  <span class="spacer"></span>

</mat-toolbar>

<div class="table-filter-form">

  <div>
    <span class="field-label subordinated">币种</span>
    <button mat-button [color]="queryForm.ccy===ccyAll? 'accent':null"
            (click)="ccySelected(ccyAll)">
      {{ccyAllLabel}}
    </button>
    <button mat-button [color]="queryForm.ccy===ccy? 'accent':null"
            *ngFor="let ccy of ccys"
            (click)="ccySelected(ccy)">
      <img class="ccy-logo" [src]="CoinLogoPath(ccy)" alt="">
      {{ccy}}
    </button>
  </div>

  <div class="operation-bar">

    <span class="field-label subordinated">截止日期</span>
    <mat-form-field class="date-field">
      <input matInput [matDatepicker]="dateToPicker" placeholder="" [max]="today"
             [(ngModel)]="createTsTo" (dblclick)="clearDate()" (dateChange)="dateChanged()">
      <mat-datepicker-toggle matSuffix [for]="dateToPicker"></mat-datepicker-toggle>
      <mat-datepicker #dateToPicker></mat-datepicker>
    </mat-form-field>

    <span class="field-label subordinated">条数</span>
    <mat-form-field class="limit-field">
      <mat-select [(ngModel)]="queryForm.limit">
        <mat-option *ngFor="let limit of limitOptions" [value]="limit">
          {{limit}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <button mat-button color="primary" (click)="loadData()" [disabled]="processes.queryKlines">
      <mat-icon>file_download</mat-icon>
      加载
    </button>

    <span class="spacer"></span>

    <div *ngIf="currentForm">
      <button mat-button (click)="loadMore()" [disabled]="currentForm.noMoreData">
        <mat-icon>add</mat-icon>
        更多（更早）
      </button>
    </div>
  </div>

</div>

<div [style.width.px]="chartWidth" [style.height.px]="chartHeight" class="chart" #chart></div>


<p>&nbsp;</p>
